
<template>
    <div class="box" >
      <el-card style="height: 90%">
        <template #header><div class="text-4xl">贷款合同书</div></template>
        <p class="text-2xl">
          甲方（贷款人）：杜明珅银行<br>
          地址：河南财经政法大学<br>
          联系电话：<br>
          乙方（借款人）：<span v-if="loanInfo" class="font-bold">{{loanInfo.user.userRealName}}</span><br>
          身份证号码：<span v-if="loanInfo">{{loanInfo.user.userCardId}}</span><br>
          联系电话：<span v-if="loanInfo">{{loanInfo.user.userPhone}}</span><br>
          <div class="text-3xl font-bold">一、借款金额</div>
          乙方从甲方处借款人民币:<span class="text-gray-600 text-3xl" v-if="loanInfo">{{loanInfo.loanAccount}}</span>元<br>
          <div class="text-3xl font-bold">二、借款时间</div>
          借款期限自 <span class="text-gray-600 text-3xl" v-if="loanInfo">{{formatDate(loanInfo.loanDate)}}</span> 起至<span class="text-gray-600 text-3xl" v-if="loanInfo"> {{formatDateAddDay(loanInfo.loanDate)}}</span> 止<br>
          <div class="text-3xl font-bold">三、借款用途协议</div>
          乙方承诺将借款仅用于 具体借款用途，如个人消费、企业经营、房屋装修等，未经甲方书面同意，乙方不得将借款挪作他用。<br>
          <hr>
         <div  class="mt-24 w-full flex justify-end"><img src="/校徽.png" class="w-32 h-32"></div>
        </p>
      </el-card>
    </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      loanId:null,
      loanInfo:null
    }

  },
  methods:{
    formatDate(dateValue) {
      if (dateValue) {
        const date = new Date(dateValue);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }
      return '';
    },
    formatDateAddDay(dateValue) {
      if (dateValue) {
        const date = new Date(dateValue);
        date.setDate(date.getDate() + this.loanInfo.loanDay);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }
      return '';
    }
  },
  created(){
    const url=new URL(window.location.href);
    this.loanId=url.searchParams.get("loanId");
  },
mounted() {
    axios.get(`http://localhost:8080/getLoanContract?loanId=${this.loanId}`).then(res=>{
      this.loanInfo=res.data.data;
      console.log(this.loanInfo);
    })
}
}

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}

.box{
  margin-top: 40px;
  width: 800px;
  height: 900px;
  margin-left: auto;
  margin-right: auto;
}


</style>